<template>
	<view class="page-container back-grey-light" :class="goods.length?'good-box':''">
		<!-- 菜单 -->
		<scroll-view v-if="goods.length" scroll-y="true" scrollRightTop :scroll-into-view="itemId" :scroll-top="scrollTop"
			class="back-grey-light" :style="{height: scrollHeight+'px'}">
			<view style="padding-bottom: 150rpx;">
				<view v-for="(item, index) in goods" :key="index" class="row-box center prow-base cate-item"
				:class="cate==index?'':'back-white'" @click="swichMenu(index)">
					<text :class="cate==index?'bold primary':'grey-light'" style="text-align: center;">{{ item.name }}</text>
					<view v-show="cate==index" class="highlight"></view>
				</view>
			</view>
		</scroll-view>
		<!-- 商品 -->
		<scroll-view v-if="goods.length" scroll-y="true" scroll-with-animation :scroll-top="scrollRightTop" @scroll="rightScroll"
			:style="{height: scrollHeight+'px'}">
			<view style="padding-bottom: 150rpx;">
				<view v-for="(item, index) in goods" :key="index" class="col-box prow-base good-cate">
					
					<!-- 商品列表 -->
					<view class="">
						<!-- 标题 -->
						<view class="pcol-lg title-box">
							<text class="s26 bold">{{ item.name }}</text>
						</view>
						<!-- 商品项 -->
						<view v-for="(item2, index2) in item.goodsList" :key="index2" class="radius-l back-white pall-base good-item"
						:class="index2==item.goodsList.length-1?'':'gap'">
							<view class="content">
								<image class="radius-l image" :src="item2.img" mode="aspectFill"></image>
								<view class="col-box sb" style="height: 100%;">
									<text class="bold mb-4 limit2">{{ item2.name }}</text>
									<text v-if="item2.description" class="s24 grey-light limit2 mb-4">{{ item2.description }}</text>
									<view class="row-box sb">
										<view class="price-box row-box end">
											<text class="s24 bold" style="line-height: 24rpx;">￥</text>
											<text class="s32 bold" style="line-height: 32rpx;">{{ moneyFormat(item2.defaultSpec.price, 2) }}</text>
										</view>
										<view class="row-box">
											<!-- <text class="s24 grey-light mr-10">月销:0</text> -->
											<text class="s24 grey-light">总销量：{{ item2.sale }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="row-box sb mt-base handle">
								<view class="button row-box center back-primary" @tap.stop="goGoodsEdit(item2)">
									<text class="white">编辑</text>
								</view>
								<view class="button row-box center" :class="item2.status?'back-primary':'back-red'" @tap.stop="changeGoodsStatus(index, index2)">
									<text class="white">{{ item2.status?'上架':'下架' }}</text>
								</view>
								<view class="button row-box center back-text-grey" @tap.stop="removeGoods(index, index2)">
									<text class="white">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view v-if="!goods.length" class="col-box center pcol-lg">
			<image src="/static/icon/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
			<text class="s24 grey-light">还没有添加商品~</text>
		</view>
		
		<!-- 悬浮按钮-添加商品 -->
		<view class="radius-circle back-white add-button" @click="goGoodsEdit()">
			<image class="icon" src="../static/新增.png"></image>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import mixinLinkage from "@/common/mixin_linkage.js"
	export default {
		mixins: [mixinLinkage],
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('m_user', ['userId']),
		},
		onLoad() {
			this.scrollHeight = uni.getSystemInfoSync().windowHeight
			
		},
		onShow() {
			// 获取商品信息列表
			this.getGoodsList()
		},
		methods: {
			// 上架、下架商品
			changeGoodsStatus(index, index2) {
				let id = this.goods[index].goodsList[index2].id
				this.$api.ChangeGoodsStatus({
					id: id
				}).then(res => {
					console.log('ChangeGoodsStatus-success', res)
					if (res.data.code == 200) {
						this.goods[index].goodsList[index2].status = !this.goods[index].goodsList[index2].status
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('ChangeGoodsStatus-fail', err)
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				})
			},
			
			// 删除商品
			removeGoods(index, index2) {
				let id = this.goods[index].goodsList[index2].id
				uni.showModal({
					content: '确定删除该商品？',
					confirmText: '确定',
					confirmColor: this.redColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.DelGoods({
								id: id
							}).then(res => {
								console.log('DelGoods-success', res)
								if (res.data.code == 200) {
									this.goods[index].goodsList.splice(index2, 1)
									uni.showToast({
										icon: 'none',
										title: '删除成功！'
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.msg
									})
								}
							}).catch(err => {
								console.log('DelGoods-fail', err)
								uni.showToast({
									icon: 'none',
									title: '删除失败！'
								})
							})
						}
					}
				})
			},
			
			// 跳转新增商品
			goGoodsEdit(item=null) {
				if (item) {
					uni.navigateTo({
						url: `/pages/subPackage/merchant/goods_edit/goods_edit?params=${JSON.stringify(item)}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/subPackage/merchant/goods_edit/goods_edit`
					})
				}
			},
			
			// 获取商品信息列表
			getGoodsList() {
				this.$api.GetGoodsList({
					userId: this.userId
				}).then(res => {
					console.log('GetGoodsList-success', res)
					if (res.data.code === 200) {
						this.goods = res.data.data
					}
				}).catch(err => {
					console.log('GetGoodsList-fail', err)
				})
			},
		},
	}
</script>

<style lang="scss">
	// 商品信息
	.good-box {
		display: grid;
		grid-template-columns: 180rpx 1fr;
		//分类项
		.cate-item {
			box-sizing: border-box;
			height: 116rpx;
			position: relative;
			.highlight {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
				width: 8rpx;
				height: 116rpx;
				border-radius: 0 10rpx 10rpx 0;
				background: $uni-color-primary;
			}
			.number {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
				width: 32rpx;
				height: 32rpx;
			}
		}
		// 商品项
		.good-item {
			
			box-shadow: 0 0 10rpx #eee;
			.content {
				height: fit-content;
				display: grid;
				grid-template-columns: 184rpx 1fr;
				column-gap: 20rpx;
				align-items: center;
				.image {
					display: block;
					width: 184rpx;
					height: 184rpx;
				}
			}
			&.gap {
				margin-bottom: 30rpx;
			}
			.handle {
				.button {
					width: 120rpx;
					height: 56rpx;
					border-radius: 28rpx;
				}
			}
		}
	}
	
	// 新增商品按钮
	.add-button {
		position: fixed;
		right: 32rpx;
		bottom: 48rpx;
		z-index: 99;
		.icon {
			display: block;
			width: 73rpx;
			height: 72rpx;
		}
	}
</style>
